<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/session.jsp"%>
<c:set var="categoryId" value="${param.categoryId}" />
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="${ctx}/css/default.css"/>
    <script type="text/javascript" src="${ctx}/js/xtable.js"></script>
    <script type="text/javascript" src="${ctx}/js/calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/CategoryService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/AudioService.js'></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
</head>
<body onload="selectCategory()">
<table width="100%">
    <tr>
        <td valign="top">
            <form id="audioForm" name="audioForm" onsubmit="return submitAudio();">
                <input type="hidden" id="audioId" name="audioId" value="">
                <input type="hidden" id="audioCover" name="audioCover">
                <table width="100%" height="100%" cellspacing="5" cellpadding="5">
                    <tr>
                        <td>
                            <input type="file" id="audioCoverFile" name="audioCoverFile" style="display: none;" placeholder="音频封面" accept="image/jpeg" onchange="$('audioCoverButton').innerText=this.value;$('audioTitle').value=this.value.substring(this.value.lastIndexOf('\\') + 1, this.value.lastIndexOf('.'));"/>
                            <button type="button" id="audioCoverButton" name="audioCoverButton" style="width: 100%" onclick="document.audioForm.audioCoverFile.click()">上传音频封面</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="audioTitle" name="audioTitle" maxlength="50" placeholder="音频名称" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="audioAuthor" name="audioAuthor" maxlength="50" placeholder="音频作者"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="audioSource" name="audioSource" maxlength="200" placeholder="音频来源"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="categoryId" name="categoryId" required>
                                <option value="">请选择类别</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <button type="button" onclick="selectAudioPage()">查询音频</button>
                            <button type="button" onclick="insertAudio()">新增音频</button>
                            <button type="button" onclick="updateAudio()">修改音频</button>
                            <button type="button" onclick="deleteAudio()" id="deleteAudioButton">删除音频</button>
                            <button type="submit" id="submitAudioButton" style="visibility: hidden"></button>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
        <td valign="top">
            <form id="audioChapterForm" name="audioChapterForm" onsubmit="return submitAudioChapter();">
                <input type="hidden" id="audioChapterId" name="audioChapterId" value="">
                <input type="hidden" id="audioChapterFile" name="audioChapterFile">
                <table width="100%" height="100%" cellspacing="5" cellpadding="5">
                    <tr>
                        <td>
                            <input type="file" id="audioChapterFileFile" name="audioChapterFileFile" style="display: none;" placeholder="分集文件" accept="audio/mpeg" onchange="$('audioChapterFileButton').innerText=this.value;$('audioChapterTitle').value=this.value.substring(this.value.lastIndexOf('\\') + 1, this.value.lastIndexOf('.'));"/>
                            <button type="button" id="audioChapterFileButton" name="audioChapterFileButton" style="width: 100%" onclick="document.audioChapterForm.audioChapterFileFile.click()">上传分集文件</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="audioChapterTitle" name="audioChapterTitle" maxlength="50" placeholder="分集名称" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="number" id="audioChapterTimes" name="audioChapterTimes" step="1" placeholder="分集时间"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <button type="button" onclick="insertAudioChapter()">新增分集</button>
                            <button type="button" onclick="updateAudioChapter()">修改分集</button>
                            <button type="button" onclick="deleteAudioChapter()">删除分集</button>
                            <button type="submit" id="submitAudioChapterButton" style="visibility: hidden"></button>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
    <tr>
        <td valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var audioThead = new Array(
                    new XThead("选择", "radio"),
                    new XThead("音频名称"),
                    new XThead("音频封面")
                );

                var audioXTable = new XTable("audio", audioThead);

                audioXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("audio", model.audioId, "radio", "onclick='setAudio(this)'", model),
                        new XTbody("audio", model.audioTitle),
                        new XTbody("audio", "<a href='" + model.audioCover + "' target='_blank'><img width=50 height=60 style='border:1px solid #c9c9c9' onerror='' src='" + model.audioCover + "'/></a>", "string", null, null, "center")
                    );
                    return array;
                }

                audioXTable.getXList = function (page){
                    var audio = dwr.util.getValues("audioForm");
                    audio.pageIndex = page;
                    audio.pageSize = audioXTable.pageSize;
                    AudioService.selectAudioList(audio, function(list){audioXTable.addTable(list);});
                }

                function selectAudioPage(){
                    var audio = dwr.util.getValues("audioForm");
                    AudioService.selectAudioNum(audio, function(num){audioXTable.setTotalPage(num);});
                }
            </SCRIPT>
        </td>
        <td valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var audioChapterThead = new Array(
                    new XThead("选择", "radio"),
                    new XThead("分集名称"),
                    new XThead("查看")
                );

                var audioChapterXTable = new XTable("audioChapter", audioChapterThead, true);

                audioChapterXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("audioChapter", model.audioChapterId, "radio", "onclick='setAudioChapter(this)'", model),
                        new XTbody("audioChapter", model.audioChapterTitle),
                        new XTbody("audioChapter", "<a href='" + model.audioChapterUrl + "' target='_blank'>查看</a>", "string", null, null, "center")
                    );
                    return array;
                }

                audioChapterXTable.getXList = function (page){
                    var audioChapter = dwr.util.getValues("audioChapterForm");
                    audioChapter.audioId = dwr.util.getValue("audioId");
                    AudioService.selectAudioChapterList(audioChapter, function(list){
                        if (list.length > 0) {
                            $("deleteAudioButton").style.display = "none";
                        } else {
                            $("deleteAudioButton").style.display = "";
                        }
                        audioChapterXTable.addTable(list);
                    });
                }
            </SCRIPT>
        </td>
    </tr>
</table>
</body>
</html>
<script>
    function selectCategory() {
        var category = new Category();
        category.categoryParentId = 19;
        CategoryService.selectCategoryList(category, function(list){
            dwr.util.addOptions("categoryId", list, "categoryId", "categoryName");
            dwr.util.setValue("categoryId", "${categoryId}");
            selectAudioPage();
        });
    }

    function setAudio(obj) {
        var audio = obj.parentElement.parentElement.model;
        dwr.util.setValues(audio);
        audioChapterXTable.goPage(1);
    }

    function submitAudio() {
        var audioId = dwr.util.getValue("audioId");
        var confirmMsg = audioId ? "确定修改音频" : "确定新增音频";
        if (confirm(confirmMsg)) {
            var audio = dwr.util.getValues("audioForm");
            var audioCoverValue = document.getElementById("audioCoverFile").value;
            var audioCoverFile = audioCoverValue == "" ? null : dwr.util.getValue("audioCoverFile");
            if (audioId) {
                AudioService.updateAudio(audio, audioCoverFile, selectAudioPage);
            } else {
                if (audioCoverValue == "") {
                    alert("请添加音频封面")
                    return false;
                }
                AudioService.insertAudio(audio, audioCoverFile, selectAudioPage);
            }
        }
        return false;
    }

    function insertAudio() {
        dwr.util.setValue("audioId", "");
        $("submitAudioButton").click();
    }

    function updateAudio() {
        var audioId = dwr.util.getValue("audioId");
        if (!audioId) {
            alert("请选择要修改的音频");
            return false;
        }
        $("submitAudioButton").click();
    }

    function deleteAudio() {
        var audioId = dwr.util.getValue("audioId");
        if (!audioId) {
            alert("请选择要删除的音频");
            return false;
        }
        if (confirm("确定删除音频")) {
            var audio = dwr.util.getValues("audioForm");
            AudioService.deleteAudio(audio, selectAudioPage);
        }
    }

    function setAudioChapter(obj) {
        var audioChapter = obj.parentElement.parentElement.model;
        dwr.util.setValues(audioChapter);
    }

    function submitAudioChapter() {
        var audioChapterId = dwr.util.getValue("audioChapterId");
        var audioId = dwr.util.getValue("audioId");
        var confirmMsg = audioChapterId ? "确定修改分集" : "确定新增分集";
        if (confirm(confirmMsg)) {
            var audioChapter = dwr.util.getValues("audioChapterForm");
            var audioChapterFileValue = document.getElementById("audioChapterFileFile").value;
            var audioChapterFileFile = audioChapterFileValue == "" ? null : dwr.util.getValue("audioChapterFileFile");
            if (audioChapterId) {
                AudioService.updateAudioChapter(audioChapter, audioChapterFileFile, function () {
                    audioChapterXTable.goPage(1);
                });
            } else {
                if (audioChapterFileValue == "") {
                    alert("请添加分集文件")
                    return false;
                }
                if (!audioId) {
                    alert("请选择所属音频")
                    return false;
                }
                audioChapter.audioId = audioId;
                AudioService.insertAudioChapter(audioChapter, audioChapterFileFile, function () {
                    audioChapterXTable.goPage(1);
                });
            }
        }
        return false;
    }

    function insertAudioChapter() {
        dwr.util.setValue("audioChapterId", "");
        $("submitAudioChapterButton").click();
    }

    function updateAudioChapter() {
        var audioChapterId = dwr.util.getValue("audioChapterId");
        if (!audioChapterId) {
            alert("请选择要修改的分集");
            return false;
        }
        $("submitAudioChapterButton").click();
    }

    function deleteAudioChapter() {
        var audioChapterId = dwr.util.getValue("audioChapterId");
        if (!audioChapterId) {
            alert("请选择要删除的分集");
            return false;
        }
        if (confirm("确定删除分集")) {
            var audioChapter = dwr.util.getValues("audioChapterForm");
            AudioService.deleteAudioChapter(audioChapter, function () {
                audioChapterXTable.goPage(1);
            });
        }
    }
</script>
